refactor/vite #706
refactor/vite #706
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hello @anyulled, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
Summary of Changes
This pull request focuses on refactoring the project from Create React App (CRA) to Vite. This involves updating dependencies, modifying build scripts, and adjusting test configurations to align with Vite's requirements. The primary goal is to improve development speed and build performance by leveraging Vite's features.
Highlights
- Migration to Vite: The project is migrated from Create React App to Vite, which involves removing
react-scriptsand addingvite,@vitejs/plugin-react, andvitestas dependencies. - Test Configuration Updates: Test configurations are updated to use
vitestinstead ofreact-scripts' testing environment, including setting upjsdomand adjusting mock implementations. - Build Script Modifications: The
package.jsonscripts are modified to use Vite's commands for starting, building, previewing, and testing the application. - Index HTML Update: The
index.htmlfile is updated to include the necessary script tag for the main entry point (/src/index.tsx) and to ensure proper loading of the React application. - Mocks Update: The test files are updated to use
vifromvitestinstead ofjestfor mocking dependencies.
Changelog
Click here to see the changelog
- index.html
- Created a new
index.htmlfile with the basic HTML structure, including meta tags, link tags, and a script tag for the main entry point (/src/index.tsx). - Added a script to handle Single Page App redirects for GitHub Pages.
- Created a new
- package.json
- Removed
react-scriptsdependency. - Added
vite,@vitejs/plugin-react,@vitest/coverage-v8, andjsdomas dev dependencies. - Updated scripts to use Vite commands (
vite,vite build,vite preview,vitest run). - Updated test-coverage script to use vitest.
- Updated faker-js/faker to version ^8.0.0
- Removed
- src/2023/Cfp/CfpSection2023.test.tsx
- Replaced
jestwithvifromvitestfor mockinguseWindowSize.
- Replaced
- src/2023/Home/components/InfoButtons/InfoButtons.test.tsx
- Replaced
jestwithvifromvitestfor mockinggaEventTrackerand clearing mocks.
- Replaced
- src/2023/Home/components/MultimediaInfoButtons/MultimediaInfoButtons.test.tsx
- Replaced
jestwithvifromvitestfor mockinggaEventTrackerand clearing mocks.
- Replaced
- src/2023/SessionFeedback/SessionFeedback.test.tsx
- Replaced
jestwithvifromvitestfor mockingsessionData.
- Replaced
- src/2023/SpeakerDetail/Speaker.style.ts
- Removed
StyledSpeakerImgBorderandrightVariantsstyled components.
- Removed
- src/2023/Speakers/Speakers2023.test.tsx
- Replaced
jestwithvifromvitestfor mocking dependencies. - Skipped the test
handles errors correctlydue to difficulties in mocking Sentry in Vitest.
- Replaced
- src/2024/SpeakerDetail/SpeakerDetail.tsx
- Updated route imports to use
ROUTE_2024_SPEAKERSandROUTE_2024_TALK_DETAIL.
- Updated route imports to use
- src/2024/Speakers/Speakers2024.test.tsx
- Replaced
jestwithvifromvitestfor mocking dependencies.
- Replaced
- src/App.test.tsx
- Replaced
jestwithvifromvitestfor mockingaxiosand clearing mocks.
- Replaced
- src/components/UI/Button.test.tsx
- Replaced
jestwithvifromvitestfor mockinggaEventTrackerand clearing mocks.
- Replaced
- src/hooks/useFetchSpeakers.test.tsx
- Replaced
jestwithvifromvitestfor mockingaxiosand clearing mocks.
- Replaced
- src/hooks/useFetchSpeakers.ts
- Added type
IResponseto thereturnDatavariable.
- Added type
- src/hooks/useFetchTalks.test.tsx
- Replaced
jestwithvifromvitestfor mockingaxiosand clearing mocks.
- Replaced
- src/index.tsx
- Replaced
ReactDOM.renderwithcreateRootfor React 18 compatibility. - Renamed
tracking_IDtotrackingID.
- Replaced
- src/setupTests.ts
- Replaced
jest.fn()withvi.fn()for mockingwindow.scrollTo.
- Replaced
- src/views/Home/components/Faqs/components/FaqsCard.tsx
- Updated image path to use
/images/FaqsImage${index}.jpginstead ofrequire.
- Updated image path to use
- src/views/Home/components/InfoButtons/InfoButtons.test.tsx
- Replaced
jestwithvifromvitestfor mockinggaEventTrackerand clearing mocks.
- Replaced
- src/views/Home/components/Sponsors/Supporters.test.tsx
- Replaced
jestwithvifromvitestfor mockinguseWindowSizeand clearing mocks.
- Replaced
- src/views/Home/components/Sponsors/useSponsorsHook.test.tsx
- Replaced
jestwithvifromvitestfor mockingbuildSlashesand clearing mocks. - Corrected the expected value of
result.current.slashesto be////.
- Replaced
- src/views/SessionFeedback/SessionFeedback.test.tsx
- Replaced
jestwithvifromvitestfor mockingsessionData.
- Replaced
- src/views/Speakers/Speakers.test.tsx
- Replaced
jestwithvifromvitestfor mocking dependencies.
- Replaced
- src/views/Talks/Talks.tsx
- Added optional chaining to
textinremoveParenthesesContentfunction. - Added optional chaining to
group?.groupId?.toString().
- Added optional chaining to
- src/views/kcd/Kcd.test.tsx
- Replaced
jestwithvifromvitestfor mocking dependencies.
- Replaced
- src/views/kcd/Kcd.tsx
- Updated the StyledImage and revealAnimation styled components
- src/vite-env.d.ts
- Added a reference type for vite/client
- tsconfig.json
- Set
strictandforceConsistentCasingInFileNamesto false. - Set
noEmitOnErrorto false. - Added exclude patterns for test and spec files.
- Set
- vite.config.ts
- Created a new
vite.config.tsfile to configure Vite, including plugins, resolve aliases, define environment variables, and set build and server options. - Configured test environment with vitest
- Created a new
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
From CRA's confines, a new flight,
Vite's speed and ease, a welcome sight.
No more waiting long,
Builds now swift and strong,
A modern toolkit, shining bright.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Code Review
This pull request migrates the project from Create React App to Vite, which is a significant change. The changes include updating dependencies, build scripts, test configurations, and mock implementations. Overall, the migration seems well-structured, but there are a few areas that need attention to ensure correctness and maintainability.
Summary of Findings
- Migration to Vite: The pull request migrates the project from Create React App to Vite, which should improve build and development performance. However, it's important to ensure all configurations and dependencies are correctly set up for Vite.
- Testing Framework Update: The project updates the testing framework from Jest to Vitest. This requires updating test files and configurations to be compatible with Vitest.
- Mocks with Vitest: The pull request updates the mocks to use
vifrom Vitest instead ofjest. Ensure that all mocks are correctly implemented and that the tests are passing. - Inconsistent use of mocked function: There are some inconsistencies in how mocked functions are called and reset. Ensure that
vi.mockedis used consistently and that mocks are cleared correctly after each test. - Type safety: The pull request disables strict type checking in
tsconfig.json. While this might be necessary for the migration, it's important to re-enable strict type checking as soon as possible to improve code quality and prevent runtime errors.
Merge Readiness
The pull request introduces significant changes related to the migration to Vite and the update of the testing framework. While the changes seem well-structured, there are several medium and high severity issues that need to be addressed before merging. Specifically, the inconsistencies in mock implementations and the disabling of strict type checking should be resolved. I am unable to approve this pull request, and recommend that it not be merged until these issues are addressed and the tests are passing. It is also recommended that others review and approve this code before merging.
✅ Deploy Preview for dev-bcn ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
refactor from create react app to vite